import Taro, { Component } from '@tarojs/taro'
import { View, Text, Swiper, SwiperItem, Map, ScrollView } from '@tarojs/components'
import './index.scss'
import { AtButton, AtCalendar, AtCard, AtInputNumber, AtImagePicker, AtTabs, AtTabsPane, AtPagination, AtActivityIndicator, AtList, AtListItem, AtIcon, AtDivider, AtFloatLayout } from 'taro-ui'
import AtTabBar_index from '../../components/AtTabBar_index';
// 引入SDK核心类
import requets from '../../service/api';

var yiyuan_icon = require('../../assets/img/yiyuan_icon.png')


export default class Index extends Component {
  config = {
    navigationBarTitleText: '医疗废物收运助手'
  }
  state = {
    current: 0,
    userName: '',
    tab: [],
    dsp: '',
    ytg: '',
    yjj: '',
    userId: '',

  }

  componentWillMount() { }

  componentDidMount() {

    Taro.getStorage({
      key: 'userId',
      success: (res) => {
        this.setState({
          userId: res.data
        }, () => {
          requets.baseOptions({
            url: `/zjn-web/zjn/collector/record/myCollectorList?userId=${this.state.userId}`,
            method: 'GET',
            data: {}
          }).then((res) => {
            console.log(res, 33)
            if (res.data.rc === 0) {
              this.setState({
                userName: res.data.ret.userName,
                tab: res.data.ret.tab,
                dsp: res.data.ret.sh.dsp,
                ytg: res.data.ret.sh.ytg,
                yjj: res.data.ret.sh.yjj
              })
            }
          })
        })
      }
    })


  }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }
  handleClick(value) {
    this.setState({
      current: value
    })
  }

  render() {
    const { current, userName, tab, dsp, ytg, yjj } = this.state
    const tabList = [{ title: '今日' }, { title: '本月' }, { title: '本年' }, { title: '累计' }]

    return (
      <View className='index'>

        <AtTabBar_index current={3} />
        <View className='topBox'>
          <View className='topBox_bo'>
            {userName}
          </View>
        </View>
        <View style={{ height: '17vh' }}></View>
        <AtTabs current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
          {
            tab.map((item, index) => {
              return (
                <AtTabsPane current={this.state.current} index={index} key={index}>
                  <View className='tabWarp' >
                    <View className='box' style={{ color: '#8FC31F' }}>
                      <View><Text className='title'>{item.hosipitalNum}</Text>个</View>
                      <View className='bottom'>收集对象</View>
                    </View>
                    <View className='box' style={{ color: '#2CBFEF' }}>
                      <View><Text className='title'>{item.collectorBucketNum}</Text>桶</View>
                      <View className='bottom'>收集桶数</View>
                    </View>
                    <View className='box' style={{ color: '#AA89BD' }}>
                      <View><Text className='title'>{item.collectorWeight}</Text>kg</View>
                      <View className='bottom'>收集重量</View>
                    </View>
                  </View>
                </AtTabsPane>
              )
            })
          }




        </AtTabs>
        <View className='tabWarp2' >
          <View className='box' style={{ color: '#8FC31F' }}>
            <View><Text className='title'>{dsp}</Text></View>
            <View className='bottom'>待审批</View>
          </View>
          <View className='box' style={{ color: '#2CBFEF' }}>
            <View><Text className='title'>{ytg}</Text></View>
            <View className='bottom'>已通过</View>
          </View>
          <View className='box' style={{ color: '#AA89BD' }}>
            <View><Text className='title'>{yjj}</Text></View>
            <View className='bottom'>已拒绝</View>
          </View>
        </View>
      </View>
    )
  }
}
